
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<canvas id="myCanvas" width="1200" height="600"></canvas>
		<script type="text/javascript">
			var canvas=document.getElementById("myCanvas");
			var ctx=canvas.getContext("2d");
			
			var arcArr=[
				[40,20,20,5,0,"black"],//位置，位置，半径，x方向力vx,vy
				[40,20,20,10,0,"green"],
				[40,20,20,10,5,"blue"]
			];
			
			setInterval(function(){   
				
//				var vx = parseInt(Math.random()*10)+5;
//				var vx = parseInt(Math.random()*5);
//				var r = parseInt(Math.random()*256);
//				var g = parseInt(Math.random()*256);
//				var b = parseInt(Math.random()*256);
				
				
				//前两个表示从哪推出球，第三个表示推出球的半径，后两个是x,y的力，最后是小球的随机颜色
				arcArr.push([20,20,20,20,10,"RGB("+Math.floor(Math.random()*256)+", " +  Math.floor(Math.random() * 256) + "," + Math.floor(Math.random() * 256) + ")"]);
			},1000);//1000表示一秒。越小推出的球越多
			
			setInterval(function(){
				ctx.fillStyle="rgba(255,255,0,0.8)";
				ctx.fillRect(0,0,1200,600);
				
				for (var i=0;i<arcArr.length;i++) {
					
				
			 		ctx.beginPath();
			 		ctx.fillStyle=arcArr[i][5];
//			 	
//			 		var arcX=arcArr[0][0];
//			 		var arcY=arcArr[0][1];
//			 		var arcR=arcArr[0][2];
//			 		var arcVX=arcArr[0][3];
//			 		var arcVY=arcArr[0][4];
			 		
			 		
			 		ctx.arc(arcArr[i][0],arcArr[i][1],arcArr[i][2],0,2*Math.PI);
					ctx.fill();
					arcArr[i][0]=arcArr[i][0]+arcArr[i][3];//arcX=arcX+arcVX
					arcArr[i][1]=arcArr[i][1]+arcArr[i][4];//arcY=arcY+arcVY
					arcArr[i][4]=arcArr[i][4]+1.6;//arcVY=arcVY+0.5，如果0.5太小只蹦几下就不蹦了
				
					//下面。高度不用设置，因为已经乘过0.8
					if(arcArr[i][1]>600-arcArr[i][2]){
						arcArr[i][4]=-arcArr[i][4];//arcVY=-arcVY;
						arcArr[i][4]=arcArr[i][4]*0.8;
						arcArr[i][1]=600-arcArr[i][2];//arcY=600-半径;不让球掉到下面
					}
				
					//右面
					if(arcArr[i][0]>1200-arcArr[i][2]){
						arcArr[i][3]=-arcArr[i][3];//arcVX=-arcVX;
						arcArr[i][0]=1200-arcArr[i][2];//arcX=1200-半径;不让球走出右面
					}
				
					//左面
					if(arcArr[i][0]<arcArr[i][2]){
						arcArr[i][3]=-arcArr[i][3];//arcVX=-arcVX;
						arcArr[i][0]=arcArr[i][2];//arcX=半径
					}
				}
			},16)
				
				
		</script>
	</body>
</html>
